<template>
  <div class="page-basic">
    <a-form :model="formState" :rules="basicRules" ref="basicRef">
      <div class="page-basic-hasBtn">
        <a-form-item label="影人名称" name="person_name">
          <a-input
            v-model:value.trim="formState.person_name"
            :maxlength="50"
            placeholder="请输入影人名称"
            class="w-[304px]"
          />
          <a-button type="primary" class="ml-[8px]" @click="handleListByName" :loading="nameLoading">获取资料</a-button>
        </a-form-item>
        <a-form-item name="person_name_alias">
          <a-input
            v-model:value.trim="formState.person_name_alias"
            :maxlength="50"
            placeholder="请输入别名"
            class="w-[250px]"
          />
        </a-form-item>
        <a-form-item name="person_name_eng">
          <a-input
            v-model:value.trim="formState.person_name_eng"
            :maxlength="50"
            placeholder="请输入英文名"
            class="w-[250px]"
          />
        </a-form-item>
        <a-form-item label="豆瓣ID" name="beanId">
          <a-input v-model:value.trim="formState.beanId" placeholder="请输入豆瓣ID" class="w-[304px]" />
          <a-button type="primary" class="ml-[8px]" @click="handleDetailByBeanId" :loading="beanLoading"
            >获取资料</a-button
          >
        </a-form-item>
      </div>
      <div class="page-basic-classify">
        <a-form-item label="影人分类" name="person_categ_id">
          <a-select
            v-model:value="formState.person_categ_id"
            allowClear
            placeholder="选择分类"
            class="w-[250px]"
            @change="handleChange"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option
              :value="item.person_categ_id"
              v-for="item in classList"
              :key="item.person_categ_id"
              :disabled="item.person_categ_status === 2 ? true : false"
              >{{ item.person_categ_name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item name="area_id">
          <a-select
            v-model:value="formState.area_id"
            placeholder="地区"
            allowClear
            class="w-[250px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="undefined">地区</a-select-option>
            <a-select-option :value="item.area_id" v-for="item in areaList" :key="item.area_id">{{
              item.area_name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="person_gender">
          <a-select
            v-model:value="formState.person_gender"
            placeholder="性别"
            allowClear
            class="w-[250px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="undefined">性别</a-select-option>
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="person_blood_type">
          <a-select
            v-model:value="formState.person_blood_type"
            placeholder="血型"
            allowClear
            class="w-[250px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="item" v-for="item in BLOOD_TYPE" :key="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="person_constellation">
          <a-select
            v-model:value="formState.person_constellation"
            placeholder="星座"
            allowClear
            class="w-[250px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="item" v-for="item in START_TYPE" :key="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <div class="page-basic-three-column">
        <a-form-item label="身高" name="person_height">
          <a-input
            v-model:value.trim="formState.person_height"
            :maxlength="30"
            placeholder="请输入身高（cm）"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="体重" name="person_weight">
          <a-input
            v-model:value.trim="formState.person_weight"
            :maxlength="30"
            placeholder="请输入体重（kg）"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="国籍" name="person_nationality">
          <a-input
            v-model:value.trim="formState.person_nationality"
            :maxlength="30"
            placeholder="请输入国籍"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="民族" name="person_ethnic">
          <a-input
            v-model:value.trim="formState.person_ethnic"
            :maxlength="30"
            placeholder="请输入民族"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="生日" name="person_birthday">
          <!--
            <a-date-picker
            v-model:value="showTime"
            :defaultPickerValue="defaultValue"
            :format="dateFormat"
            class="w-[400px]"
            placeholder="请选择生日"
            @change="timeChange"
          />
           -->
          <a-input
            v-model:value="formState.person_birthday"
            :maxlength="30"
            placeholder="请输入生日"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="出生地" name="person_birthplace">
          <a-input
            v-model:value.trim="formState.person_birthplace"
            :maxlength="30"
            placeholder="请输入出生地"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="职业" name="person_profession">
          <a-input
            v-model:value.trim="formState.person_profession"
            :maxlength="30"
            placeholder="请输入职业"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="经纪公司" name="person_brokerage">
          <a-input
            v-model:value.trim="formState.person_brokerage"
            :maxlength="30"
            placeholder="请输入经纪公司"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="影人微博" name="person_weibo">
          <a-input
            v-model:value.trim="formState.person_weibo"
            :maxlength="100"
            placeholder="请输入影人微博"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="毕业院校" name="person_school">
          <a-input v-model:value.trim="formState.person_school" placeholder="请输入毕业院校" class="w-[400px]" />
        </a-form-item>
        <a-form-item label="代表作品" name="person_main_work">
          <a-input
            v-model:value.trim="formState.person_main_work"
            :maxlength="500"
            placeholder="多个影片使用逗号“,”分隔"
            class="w-[400px]"
          />
        </a-form-item>
        <a-form-item label="明星关系" name="person_relation">
          <a-input
            v-model:value.trim="formState.person_relation"
            :maxlength="500"
            placeholder="格式：丈夫@刘德华,好友@郭富城,密友@张学友"
            class="w-[400px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">影人简介</div>
        <a-form-item label="简介内容" name="person_introduction">
          <a-textarea
            v-model:value="formState.person_introduction"
            placeholder="请输入影人简介"
            show-count
            :maxlength="1000"
            class="h-[114px] w-[1411px]"
          />
        </a-form-item>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">影人封面</div>
        <div class="page-basic-common-cover">
          <a-form-item label="竖版封面">
            <div>
              <a-radio-group v-model:value="formState.person_cover_vertical_type" @change="handleVerticalTypeChange">
                <a-radio :value="1" class="m-r-120">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div style="display: flex; align-items: center; height: 32px">
                  <UploadImage
                    v-if="formState.person_cover_vertical_type === 1"
                    imgType="1"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getLineImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.person_cover_vertical"
                      enter-button="上传文件"
                      @search="onLineSearch"
                      readOnly
                      class="w-480"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.person_cover_vertical"
                    @blur="handleVerticalBlur"
                    placeholder="请输入URL地址"
                    class="w-480"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="verticalPreviewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available] object-contain"
                        :src="verticalPreviewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸212*282 px
                </p>
              </div>
            </div>
          </a-form-item>
          <a-form-item label="影人头像">
            <div>
              <a-radio-group v-model:value="formState.person_avatar_type" @change="handlePersonTypeChange">
                <a-radio :value="1" class="m-r-120">文件</a-radio>
                <a-radio :value="2">URL</a-radio>
              </a-radio-group>
              <div>
                <div style="display: flex; align-items: center; height: 32px">
                  <UploadImage
                    v-if="formState.person_avatar_type === 1"
                    imgType="1"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getPersonImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.person_avatar"
                      enter-button="上传文件"
                      @search="onRowSearch"
                      readOnly
                      class="w-480"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    @blur="handlePersonBlur"
                    v-model:value="formState.person_avatar"
                    placeholder="请输入URL地址"
                    class="w-480"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="personPreviewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="personPreviewImage"
                      />
                    </template>
                    <a href="javascript:;" class="whitespace-nowrap">
                      <fund-view-outlined class="icon-preview text-[18px]" /> 预览
                    </a>
                  </a-tooltip>
                </div>
                <p class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸160*160px
                </p>
              </div>
            </div>
          </a-form-item>
        </div>
      </div>
      <div class="page-basic-common">
        <div class="page-basic-common-title">影人详情</div>
        <a-form-item label="详情内容" name="person_detail">
          <a-textarea
            v-model:value="formState.person_detail"
            placeholder="请输入影人详情"
            show-count
            :maxlength="1000"
            class="h-[114px] w-[1411px]"
          />
        </a-form-item>
        <a-form-item label="影人状态" class="m-t-34" name="person_status">
          <a-radio-group v-model:value="formState.person_status">
            <a-radio :value="1" class="m-r-120">启用</a-radio>
            <a-radio :value="2">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
    </a-form>
  </div>
  <modal-view
    title="提示"
    v-model:visible="filmVisible"
    okText="确定"
    cancelText="取消"
    :afterClose="afterCloseEdit"
    @confirm="chooseConfirm"
    @cancel="chooseCancel"
    :width="458"
  >
    <div class="mb-[8px] text-[#262626]">共查询到{{ personList.length }}个影人，请选择：</div>
    <a-form ref="chooseFilmRef" :model="personState">
      <a-form-item name="beanId" :rules="[{ required: true, message: '请选择影人' }]">
        <a-select
          v-model:value="personState.beanId"
          placeholder="请选择影片"
          class="w-[380px]"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option v-for="item in personList" :value="item.douban_id" :key="item.douban_id">
            <div class="flex items-center">
              <a-tooltip placement="left" color="#fff">
                <template #title>
                  <img :src="item.cover" class="max-w-[200px] max-h-[200px] object-contain" />
                </template>
                <img :src="item.cover" class="w-[28px] h-[28px] object-contain" />
              </a-tooltip>
              {{ getPerson(item) }}
            </div>
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </modal-view>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch, inject, onUnmounted } from 'vue'
import UploadImage from '@/components/components/upload-image/UploadImage.vue'
import { formState, resetExtendFunc, isPopularity } from './state'
import { BLOOD_TYPE, START_TYPE } from './dataSource'
import type { PersonClassList } from '@/types/site/filmMakerClassification'
import ModalView from '@/components/components/modal/ModalView.vue'
import type { AreaData } from '@/types/site/area'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { storage } from '@/utils/storage'
import apis from '@/apis'
import { formatToDate, formatToDateTime, formatToUnix } from '@/utils/format'
import { forEach } from 'lodash'
// import type { Dayjs } from 'dayjs'
// import dayjs from 'dayjs'
const classList = ref<PersonClassList[]>([])
const areaList = ref<AreaData[]>([])
const router = useRouter()
const route = useRoute()
const {
  site: {
    person_classify_list,
    area_list,
    add_person,
    update_person,
    detail_person,
    detail_person_byPersonName,
    detail_person_byBeanId
  }
} = apis
const basicRef = ref()
const chooseFilmRef = ref()
const basicRules = reactive({
  person_name: [{ required: true, message: '请输入影人名称' }]
})
const baseUrl: any = inject('baseUrl')
const personId = ref()
interface IPerson {
  douban_id: string
  person_birth: string
  person_name: string
  person_sex: string
  cover: string
}
const personList = ref<IPerson[]>([])
const filmVisible = ref(false)
const nameLoading = ref(false)
const beanLoading = ref(false)
const siteId = storage.get('siteId')
const dateFormat = 'YYYY-MM-DD'
const verticalPreviewImage = ref() //图片预览地址
const personPreviewImage = ref() //图片预览地址
// const showTime = ref<Dayjs>()
// const defaultValue = ref<Dayjs>(dayjs())
// const timeChange = (time: string, date: string) => {
//   console.log('time: ', time, date)
// }
const personState = reactive<{ beanId: string | undefined }>({ beanId: undefined })
//头像Url
const onRowSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
//横版
const getPersonImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.person_avatar = value
  if (formState.person_avatar_type === 1) return (personPreviewImage.value = baseUrl + value)
  personPreviewImage.value = value
}
//竖版
const onLineSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
//竖版
const getLineImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.person_cover_vertical = value
  console.log(baseUrl, value, 'baseUrl + value')
  if (formState.person_cover_vertical_type === 1) return (verticalPreviewImage.value = baseUrl + value)
  verticalPreviewImage.value = value
}
const handlePersonBlur = (e: any) => {
  personPreviewImage.value = e.target.value
}
const handleVerticalBlur = (e: any) => {
  verticalPreviewImage.value = e.target.value
}
//竖版封面事件
const handleVerticalTypeChange = () => {
  basicRef.value.clearValidate(['picture_cover_vertical'])
  formState.person_cover_vertical = ''
  verticalPreviewImage.value = ''
}

//横版封面事件
const handlePersonTypeChange = () => {
  basicRef.value.clearValidate(['person_avatar'])
  formState.person_avatar = ''
  personPreviewImage.value = ''
}
//重置表单
const afterCloseEdit = () => {
  chooseFilmRef.value.resetFields()
}
//重置表单
const resetFormFunc = () => {
  basicRef.value?.resetFields()
  // formState.chapters = [
  //   {
  //     chapter_no: '1',
  //     chapter_name: '',
  //     picture_url: '',
  //     is_edit: false
  //   }
  // ]
  formState.area_id = undefined
  formState.area_name = undefined
  formState.person_birthday = undefined
  formState.person_cover_vertical = undefined
  formState.person_cover_vertical_type = 1
  formState.person_avatar = undefined
  formState.person_avatar_type = 1

  //重置扩展信息
  formState.person_keyword = undefined
  formState.person_tags = undefined
  formState.person_tags_copy = undefined
  // formState.person_pop_add_star = 3
  // formState.person_pop_star = 3
  isPopularity.value = false
  resetExtendFunc()
}
const handleChange = () => {
  console.log(formState, 'formState1231231232')
}
//获取影人分类
const getClassList = () => {
  person_classify_list({ site_id: siteId }).then((res: any) => {
    classList.value = res?.person_categ ?? []
  })
}
//获取地区列表接口
const getAreaList = () => {
  area_list({ site_id: siteId }).then((res: any) => {
    areaList.value = res?.areas ?? []
  })
}
const chooseConfirm = () => {
  chooseFilmRef.value.validate().then(() => {
    console.log(formState.beanId, 'formState.beanId')
    formState.beanId = personState.beanId
    handleDetailByBeanId()
    filmVisible.value = false
  })
}
const chooseCancel = () => {
  filmVisible.value = false
}
//根据影片名称查列表
const handleListByName = () => {
  if (!formState.person_name) return message.warning('影人名称不能为空')
  nameLoading.value = true
  detail_person_byPersonName({ person_name: formState.person_name })
    .then((res: any) => {
      console.log(res, '影人列表res')
      nameLoading.value = false
      personList.value = res?.persons ?? []
      if (personList.value.length === 1) {
        formState.beanId = personList.value[0].douban_id
        handleDetailByBeanId()
      } else if (personList.value.length > 1) {
        filmVisible.value = true
      } else {
        message.warning('未查询到影人')
      }
    })
    .catch(() => {
      nameLoading.value = false
    })
}
//根据豆瓣id查询详情
const handleDetailByBeanId = () => {
  if (!formState.beanId) return message.warning('豆瓣ID不能为空')
  // formState.area_name = undefined
  beanLoading.value = true
  detail_person_byBeanId({ douban_id: formState.beanId })
    .then((res: any) => {
      beanLoading.value = false
      const person = res.person
      personPreviewImage.value = ''
      verticalPreviewImage.value = ''
      if (person.area_id == '0') {
        delete res.person.area_id
        delete res.person.area_name
      }
      if (!res.person_categ_id || res.person_categ_id === '0') delete res.person_categ_id
      if (!res.person_gender || res.person_gender === 0) delete res.person_gender
      if (!res.person_constellation || res.person_constellation === '0') delete res.person_constellation
      if (!res.person_nationality || res.person_nationality === '0') delete res.person_nationality
      if (!res.person_birthday || res.person_birthday === '0') delete res.person_birthday
      if (!res.person_birthplace || res.person_birthplace === '0') delete res.person_birthplace
      if (!res.person_profession || res.person_profession === '0') delete res.person_profession

      Object.assign(formState, person)
      console.log('formState: ', formState)
      commonFunc(person)
    })
    .catch(() => {
      beanLoading.value = false
    })
}
const validateFunc = () => {
  const params = { ...formState }
  basicRef.value
    .validate()
    .then(() => {
      if (!personId.value) {
        params.site_id = siteId
        // params.person_birthday = formatToUnix(showTime.value as any)
        add_person(params).then(() => {
          message.success('保存影人成功')
          resetFormFunc()
          router.back()
        })
      } else {
        params.person_id = personId.value
        // params.person_birthday = formatToUnix(showTime.value as any)
        const {
          person_pop_star,
          person_pop_total,
          person_pop_day,
          person_pop_week,
          person_pop_month,
          person_pop_view,
          person_pop_like,
          person_pop_dislike,
          ...data
        } = params
        update_person(data).then(() => {
          message.success('编辑影人成功')
          resetFormFunc()
          router.back()
        })
      }
    })
    .catch(() => {
      console.log(formState, 'formState12322')
      message.warning('请检查必填项是否完整')
      // resetFormFunc()
    })
}
const commonFunc = (res: any) => {
  console.log('res=================: ', res)
  if (res.person_categ_id === '0') formState.person_categ_id = undefined
  // if (formState.person_birthday && formState.person_birthday !== '0') {
  //   showTime.value = dayjs(formState.person_birthday * 1000)
  // }
  if (res.area_id === '0') formState.area_id = undefined
  //扩展信息是否开启补偿
  if (formState.person_pop_compensated === 1) {
    isPopularity.value = true
  } else {
    isPopularity.value = false
  }
  //如果为0 置为undefined
  if (formState.person_height === '0') formState.person_height = undefined
  if (formState.person_weight === '0') formState.person_weight = undefined
  if (formState.person_gender === 0) formState.person_gender = undefined
  if (!formState.person_constellation) formState.person_constellation = undefined
  if (!formState.person_blood_type) formState.person_blood_type = undefined
  //截取前50个字符
  if (formState?.person_name ?? ''.length > 50) formState.person_name = formState?.person_name?.substring(0, 49)
  if (formState?.person_name_alias ?? ''.length > 50)
    formState.person_name_alias = formState?.person_name_alias?.substring(0, 49)
  if (formState?.person_name_eng ?? ''.length > 50)
    formState.person_name_eng = formState?.person_name_eng?.substring(0, 49)
  if (formState?.person_nationality ?? ''.length > 30)
    formState.person_nationality = formState?.person_nationality?.substring(0, 29)
  if (formState?.person_ethnic ?? ''.length > 30) formState.person_ethnic = formState?.person_ethnic?.substring(0, 29)
  if (formState?.person_weibo ?? ''.length > 100) formState.person_weibo = formState?.person_weibo?.substring(0, 99)
  if (formState?.person_main_work ?? ''.length > 500)
    formState.person_main_work = formState?.person_main_work?.substring(0, 499)
  if (formState?.person_introduction ?? ''.length > 1000)
    formState.person_introduction = formState?.person_introduction?.substring(0, 1000)
  if (formState?.person_relation ?? ''.length > 500)
    formState.person_relation = formState?.person_relation?.substring(0, 499)
  if (formState?.person_detail ?? ''.length > 1000)
    formState.person_detail = formState?.person_detail?.substring(0, 1000)

  if (formState.person_cover_vertical) {
    if (formState.person_cover_vertical_type === 1) {
      verticalPreviewImage.value = baseUrl + formState.person_cover_vertical
    } else if (formState.person_cover_vertical_type === 2) {
      verticalPreviewImage.value = formState.person_cover_vertical
    } else {
      formState.person_cover_vertical_type = 1
    }
  } else {
    formState.person_cover_vertical_type = 1
  }
  if (formState.person_avatar) {
    if (formState.person_avatar_type === 1) {
      personPreviewImage.value = baseUrl + formState.person_avatar
    } else if (formState.person_avatar_type === 2) {
      personPreviewImage.value = formState.person_avatar
    } else {
      formState.person_avatar_type = 1
    }
  } else {
    formState.person_avatar_type = 1
  }
  //状态为0显示1
  if (formState.person_status === 0) formState.person_status = 1
  // formState.video_album_ids = res.video_album.map((item: any) => {
  //   return item.album_id
  // })
  formState.person_tags_copy = res.person_tags.map((item: any) => {
    return item.tag_name
  })
  formState.person_pop_star = getMaxScore()
}
//获取影人详情
const getPersonDetail = () => {
  detail_person({ person_id: personId.value }).then((res: any) => {
    Object.assign(formState, res)
    commonFunc(res)
  })
}
const getMaxScore = () => {
  return Math.max(formState.person_pop_add_star, formState.person_pop_star)
}
const getPerson = computed(() => (item: IPerson) => {
  return (
    item.person_name +
    (item.person_sex ? '/' + item.person_sex : '') +
    (item.person_birth ? '/' + item.person_birth : '')
  )
})
//页面改变重置扩展信息
watch(
  () => route.name,
  () => {
    console.log('route: ', route)
    resetFormFunc()
  },
  {
    deep: true
  }
)
defineExpose({ validateFunc })
onMounted(() => {
  getClassList() //获取分类下拉
  getAreaList() //地区列表下拉
  personId.value = router.currentRoute.value.query?.id as string
  console.log('personId.value: ', personId.value)
  console.log(formState, '==========================')
  if (!personId.value) return false
  resetFormFunc()
  getPersonDetail()
})
onUnmounted(() => resetFormFunc())
</script>

<style lang="less" scoped>
.page-basic {
  :deep(.ant-form) {
    .m-r-120 {
      margin-right: 120px;
    }

    .m-r-110 {
      margin-right: 110px;
    }

    .m-r-6 {
      margin-right: 6px;
    }

    .ant-form-item-label > label::after {
      content: '';
      position: relative;
      top: -0.5px;
      margin: 0 0 0 16px;
    }

    .ant-form-item-label > label {
      width: 72px;
    }

    .page-basic-hasBtn {
      display: flex;
      flex-wrap: wrap;
      width: 90%;

      .ant-form-item-control-input-content {
        margin-right: 8px;
        display: flex;
      }
    }

    .page-basic-classify {
      display: flex;
      flex-wrap: wrap;
      width: 90%;
      justify-content: space-between;
    }

    .page-basic-three-column {
      width: 90%;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    /**
      .page-basic-three-column::after {
      content: '';
      flex: 1;
    }
    */

    .page-basic-filmType {
      width: 90%;
      display: flex;
      flex-wrap: wrap;

      .ant-checkbox-wrapper {
        margin: 8px 0;
      }
    }

    .page-basic-common {
      width: 90%;
      padding: 24px 0 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;

      &-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 1.14px;
        font-weight: 500;
        margin-bottom: 24px;
      }

      &-cover {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .ant-table .ant-table-container::after {
        width: 0px;
      }

      .address-content {
        margin-left: 72px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &-playAddress {
          width: 48%;
          margin: 8px 0;

          &-top {
            display: flex;
            justify-content: space-between;

            .left-title {
              &-title {
                font-size: 14px;
                color: #262626;
                letter-spacing: 0;
                margin-right: 5px;
              }
            }

            .right-btn {
              .ant-btn {
                height: 26px;
              }

              .ant-btn:not(:last-child) {
                margin-right: 8px;
              }

              .ant-btn:last-child {
                background: rgba(254, 76, 77, 0.08);
                border: 1px solid rgba(254, 76, 77, 1);
              }
            }
          }

          &-addressText {
            width: 100%;
            margin: 10px 0 16px;
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 3px;

            .ant-table-body {
              min-height: 171px;
            }

            .ant-table-tbody > tr > td,
            .ant-table tfoot > tr > th,
            .ant-table tfoot > tr > td {
              position: relative;
              padding: 8px 16px;
              overflow-wrap: break-word;
            }

            .episodeStyle {
              width: 94px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              background: #ffffff;
              border: 1px solid rgba(0, 0, 0, 0.15);
              border-radius: 3px;
            }

            .ant-form-item-control-input-content {
              .input-h-160 {
                width: 100%;
                height: 160px;
              }
            }
          }
        }
      }

      .m-t-34 {
        margin-top: 34px;
      }

      .w-480 {
        width: 480px;
      }

      .source-introduce {
        font-size: 12px;
        color: #bfbfbf;
        margin-top: 8px;
      }

      .ant-form-item-control-input-content {
        display: flex;

        .ant-radio-group {
          margin: 5px 0 15px !important;
        }
      }
    }
  }

  .bottom-button {
    display: flex;

    .ant-btn {
      margin: 24px 16px 0 0;
    }
  }
}
</style>
